<script setup lang="ts">
import { $t } from '@/locales';
import { fetchBackendError } from '@/service/api';

async function logout() {
  await fetchBackendError('8888', $t('request.logoutMsg'));
}

async function logoutWithModal() {
  await fetchBackendError('7777', $t('request.logoutWithModalMsg'));
}

async function refreshToken() {
  await fetchBackendError('9999', $t('request.tokenExpired'));
}

async function handleRepeatedMessageError() {
  await Promise.all([
    fetchBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
    fetchBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
    fetchBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
    fetchBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
    fetchBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
    fetchBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
  ]);
}

async function handleRepeatedModalError() {
  await Promise.all([
    fetchBackendError('7777', $t('request.logoutWithModalMsg')),
    fetchBackendError('7777', $t('request.logoutWithModalMsg')),
    fetchBackendError('7777', $t('request.logoutWithModalMsg'))
  ]);
}
</script>

<template>
  <NSpace vertical :size="16">
    <NCard :title="$t('request.logout')" :bordered="false" size="small" segmented class="card-wrapper">
      <NButton @click="logout">{{ $t('common.trigger') }}</NButton>
    </NCard>
    <NCard :title="$t('request.logoutWithModal')" :bordered="false" size="small" segmented class="card-wrapper">
      <NButton @click="logoutWithModal">{{ $t('common.trigger') }}</NButton>
    </NCard>
    <NCard :title="$t('request.refreshToken')" :bordered="false" size="small" segmented class="card-wrapper">
      <NButton @click="refreshToken">{{ $t('common.trigger') }}</NButton>
    </NCard>
    <NCard
      :title="$t('page.function.request.repeatedErrorOccurOnce')"
      :bordered="false"
      size="small"
      segmented
      class="card-wrapper"
    >
      <NButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</NButton>
      <NButton class="ml-12px" @click="handleRepeatedModalError">
        {{ $t('page.function.request.repeatedError') }}(Modal)
      </NButton>
    </NCard>
  </NSpace>
</template>

<style scoped></style>
